<template>
  <div class="app-container">
    <div class="card-container" v-loading="loading">
      <el-row :gutter="20">
        <el-col
          :span="8"
          v-for="exam in s_examList"
          :key="exam.id"
        >
          <el-card
            class="card-item"
            shadow="hover"
            @click="handleCardClick(exam)"
          >
            <div class="card-header">
              <p class="student-name">{{ exam.studentName }}</p>
            </div>
            <div class="card-content">
              <p>所属测试: {{ exam.examName }}</p>
              <p>
                <span :class="['status', exam.isSubmit === 0 ? 'not-submitted' : 'submitted']">
                  {{ exam.isSubmit === 0 ? '未提交' : '已提交' }}
                </span>
              </p>
              <p>提交时间: {{ parseTime(exam.submitTime) }}</p>
              <p>得分: {{ exam.score }}</p>
              <p>总分: {{ exam.allScore }}</p>
              <p>及格分: {{ exam.pass }}</p>
              <p>
                <span :class="['status', exam.isPass === 0 ? 'failed' : 'passed']">
                  {{ exam.isPass === 0 ? '未及格' : '已及格' }}
                </span>
              </p>
              <p>
                <span :class="['status', exam.isMark === 0 ? 'unmarked' : 'marked']">
                  {{ exam.isMark === 0 ? '未批改' : '已批改' }}
                </span>
              </p>
              <p>备注: {{ exam.remark || '无' }}</p>
            </div>
            <div class="card-actions">
              <el-button
                v-if="exam.isSubmit === 0"
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleInter(exam)"
              >
                进入
              </el-button>
              <el-button
                v-if="exam.isSubmit === 1"
                size="mini"
                type="text"
                icon="el-icon-search"
                @click="handleInter(exam)"
              >
                查看
              </el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <el-dialog
      :visible.sync="examInfoDialogVisible"
      title="考试信息"
      width="400px"
      append-to-body
    >
      <div>
        <p><strong>学生姓名：</strong>{{ selectedExam.studentName }}</p>
        <p><strong>考试名称：</strong>{{ selectedExam.examName }}</p>
        <p><strong>开始时间：</strong>{{ parseTime(selectedExam.startTime) }}</p>
        <p><strong>交卷时间：</strong>{{ parseTime(selectedExam.subTime) }}</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="examInfoDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="startExam">确定</el-button>
      </div>
    </el-dialog>

    <!-- 加载中提示 -->
    <el-dialog
      v-if="loadingExam"
      title="提示"
      width="300px"
      :visible.sync="loadingExam"
      close-on-click-modal="false"
      close-on-press-escape="false"
      show-close="false"
    >
      <div style="text-align: center;">
        <el-spinner type="circle"></el-spinner>
        <p style="margin-top: 10px;">考试加载中，请稍候...</p>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import { listS_exam, getS_exam, delS_exam, addS_exam, updateS_exam } from "@/api/course/s_exam";
import {listUser} from "@/api/system/user";
import {listExam} from "@/api/teacher/exam";

export default {
  name: "S_exam",
  data() {
    return {
      examInfoDialogVisible: false, // 控制考试信息对话框的显示
      loadingExam: false, // 控制“加载中”提示框的显示
      selectedExam: {}, // 当前选中的考试数据
      // 根路径
      baseURL: process.env.VUE_APP_BASE_API,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 学生考试表格数据
      s_examList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      examData:[],
      studentData:[],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        sId: null,
        eId: null,
        isSubmit: null,
        startTime: null,
        subTime: null,
        score: null,
        allScore: null,
        pass: null,
        isPass: null,
        isMark: null,
        remark: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleInter(row) {
      this.selectedExam = row; // 保存当前选中考试的数据
      this.examInfoDialogVisible = true; // 打开考试信息对话框
    },
    // 点击“开始考试”按钮后
    startExam() {
      this.examInfoDialogVisible = false; // 关闭考试信息对话框
      this.loadingExam = true; // 显示“加载中”提示框

      // 模拟加载过程（可替换为实际的加载逻辑）
      setTimeout(() => {
        this.loadingExam = false; // 关闭“加载中”提示框
        // 跳转到考试页面，并携带考试ID参数
        this.$router.push({ path: '/course/online-exam', query: { examId: this.selectedExam.id } });
      }, 2000); // 模拟2秒加载时间
    },
    parseTime(time) {
      if (!time) return '';
      const date = new Date(time);
      return date.toISOString().slice(0, 19).replace('T', ' ');
    },
    /** 查询学生考试列表 */
    getList() {
      this.loading = true;
      listS_exam(this.queryParams).then(response => {
        this.s_examList = response.rows;
        this.total = response.total;
        this.loading = false;
      });

      listUser(this.queryParams).then(response => {
        this.studentData = response.rows;
        this.total = response.total;
        this.loading = false;
      })

      listExam(this.queryParams).then(response => {
        this.examData = response.rows;
        this.total = response.total;
        this.loading = false;
      });

    }
  }
};
</script>
<style scoped>
.card-container {
  text-align: center;

}
.card-item {
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  overflow: hidden;
}
.card-item:hover {
  transform: translateY(-5px);
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}
.card-header {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #409EFF;
}
.student-name {
  font-size: 18px;
  color: #333;
}
.card-content p {
  font-size: 14px;
  margin: 5px 0;
  color: #666;
}

.status {
  font-weight: bold;
  padding: 2px 5px;
  border-radius: 10px;
}

.not-submitted {
  color: #ff4d4f;
  background-color: #ffe1e1;
}

.submitted {
  color: #52c41a;
  background-color: #e6fffb;
}

.failed {
  color: #ff4d4f;
  background-color: #fff1f0;
}

.passed {
  color: #52c41a;
  background-color: #e6fffb;
}

.unmarked {
  color: #ffa940;
  background-color: #fff7e6;
}

.marked {
  color: #52c41a;
  background-color: #e6fffb;
}

.card-actions {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.card-actions.el-button {
  width: 90px;
  font-size: 12px;
  border-radius: 20px;
  padding: 6px;
  color: #409EFF;
}
.el-button:hover {
  color: #ffffff;
  background-color: #409EFF;
}
</style>
